<template>
    <div class="custrom-header" ref="custromHeader">
        <!-- 顶部 -->
        <div class="header-banner-top">
            <div class="header-banner-top-container">
                <div class="top-left">
                    <img src="~@/assets/logo.png" @click="router.push('/')" class="logo" alt="" srcset="">
                    <div class="logo-text">
                        <div class="logo-text-top">
                            KK MV
                        </div>
                        <div class="logo-text-desc">
                            有个性 无止境
                        </div>
                    </div>
                    <!-- 顶部导航ul组合 -->
                    <ul class="nav-top-list hide-ms">
                        <li class="nav-item" @click="router.push('/')">首页</li>
                        <li class="nav-item">资源</li>
                        <li class="nav-item">导航</li>
                        <li class="nav-item">关于我们</li>
                    </ul>
                </div>
                <div class="top-right">
                    <a-space direction="vertical" size="large">
                        <a-input-search @focus="focusHandler" class="search-box" :style="{ width: '213px' }" placeholder="输入您想搜索内容" />
                    </a-space>
                    <div class="btns hide-ms">
                        <div class="login-btn">
                            登录
                        </div>
                        <div class="register-btn">
                            快速注册
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="header-banner-bottom">
            <div class="header-banner-bottom-container">
                <ul class="header-cate-list">
                    <li class="header-cate-item" v-for="(item,index) in menuList" :key="index">
                        {{ item.cate_title}}
                        <span class="fb"></span>
                        <!-- 如果包含的有分列表 -->
                        <ul v-if="item.child" class="header-cate-hover">
                            <li class="header-cate-hover-item" v-for="(child) in item.child" :key="child" @click="navigatorTo(child)">{{child.cate_title}}</li>
                        </ul>
                    </li>
                </ul>
                <!-- 右边写文章 -->
                <div class="write-button">
                    写留言
                </div>
            </div>
        </div>
    </div>
    <!-- 导入搜索组件 -->
    <custrom-search-model v-model:searchVisable="searchVisable"></custrom-search-model>
</template>

<script setup>
import {onMounted,ref,onUnmounted,onBeforeUnmount,defineProps} from 'vue'
import { addLoading } from "@/util/addLoading";
import custromSearchModel from './custromSearchModel.vue';
import { useRouter } from 'vue-router';

const router = useRouter()

let props = defineProps({
    menuList:{
        type:Array,
        default:[]
    }
})

let topPx = 64 // 顶部距离
let custromHeader = ref(null)
// 获取页面滚动距离
let handleScroll =  () => {
	    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
	    // console.log(scrollTop)
        if (scrollTop > 64) {
            // 向上面移动
            custromHeader.value.style.transform = `translateY(-${topPx}px)`

        } else {
            custromHeader.value.style.transform = `translateY(0px)`
        }
}
// 页面dom节点加载之后
onMounted(()=>{
    window.addEventListener('scroll',handleScroll)
})


// 与子组件绑定的显示隐藏
let searchVisable = ref(false)
console.log('wssss',searchVisable);


// 输入框点击函数 -- 弹窗
let focusHandler = () => {
    searchVisable.value = true
}

/* 跳转对应分类 */
let navigatorTo = (item) => {
    console.log('跳转分类的链接',item);
    router.push('/cate?path='+item.cate_href+'&page='+'&title=' + item.cate_title)
}


onBeforeUnmount(()=>{
    window.removeEventListener('scroll',handleScroll)
})
</script>

<style lang="less" scoped>
// 136, 77, 255
.custrom-header {
    z-index: 5;
    position: sticky;
    top: 0;
    margin-bottom: 16px;
    transition: .3s all;
    width: 100%;
    height: 120px;
    background-color: rgb(255, 255, 255);
    // box-shadow: 0px 1px 1px #cfcfcf;
    box-shadow: 0px 5px 40px 0px rgba(17,58,93,.1);
    .header-banner-top {
        width: 1300px;
        height: 64px;
        max-width: 100%;
        margin: 0 auto;
        // background-color: rgb(255, 255, 255);

        .header-banner-top-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .top-left {
                display: flex;
                align-items: center;
                height: 100%;

                .logo {
                    width: 40px;
                    height: 40px;
                }

                .logo-text {
                    display: flex;
                    height: 40px;
                    flex-direction: column;
                    justify-content: space-between;
                    margin-left: 5px;
                    .logo-text-top {
                        font-size: 20px;
                        font-weight: 800;
                        color: #111111;
                    }

                    .logo-text-desc {
                        font-size: 12px;
                        font-weight: 500;
                        color: rgb(178, 174, 185);
                    }
                }

                .nav-top-list {
                    display: flex;
                    align-items: center;
                    margin-left: 10px;
                    margin-top: 0px;
                    margin-bottom: 0px;
                    .nav-item {
                        cursor: pointer;
                        padding: 5px 10px;
                        font-size: 16px;
                        font-weight: 300;
                        color: #000000;
                        transition: .3 all;
                    }
                }
            }

            .top-right {
                display: flex;
                align-items: center;
                .search-box {
                    margin-right: 10px;
                    border-radius: 12px;
                }
                .btns {
                    display: flex;

                    .login-btn {
                        padding: 8px 15px;
                        background-color: #884DFF;
                        color: #fff;
                        border-radius: 12px;
                        font-size: 12px;
                        margin-right: 10px;
                        cursor: pointer;
                        transition: .3s all;
                        text-align: center;
                        &:hover {
                            background-color: #7d3dfe;
                        }
                    }

                    .register-btn {
                        font-size: 12px;
                        border-radius: 12px;
                        text-align: center;
                        padding: 8px 15px;
                        transition: .3s all;
                        background: rgb(204 204 204 / 21%);
                        cursor: pointer;
                        &:hover {
                            background: rgb(204 204 204 / 41%);
                        }
                    }
                }
            }
        }
    }

    .header-banner-bottom {
        border-top: 1px solid #f5f6f752;
        width: 1300px;
        max-width: 100%;
        margin: 0 auto;
        background-color: rgb(255, 255, 255);
        height: 55px;
        .header-banner-bottom-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .header-cate-list {
                display: flex;
                width: calc(100% - 64px);
                overflow-x: auto;
                overflow:visible;
                height: 100%;
                margin-top: 0px;
                margin-bottom: 0px;
                padding-left: 0px;
                .header-cate-item {
                    height: 100%;
                    position: relative;
                    line-height: 55px;
                    margin: 0px 12px;
                    overflow: hidden;
                    color: #2a2929;
                    cursor: pointer;
                    &:nth-child(1) {
                        margin-left: 0px;
                    }
                    &:hover {
                        overflow:visible;
                        color: #884DFF;
                    }
                    &:hover span {
                        opacity: 1;
                        bottom: 0px;
                    }
                    &:hover .header-cate-hover {
                        top: 55px;
                        z-index: 99999999;
                        height: auto;
                    }
                    // 分列表
                    .header-cate-hover {
                        transition: .3s all;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 600px;
                        z-index: 999;
                        background: #fff;
                        color: #000000;
                        box-shadow: 0px 0px 10px 1px #f4f3f3;
                    }
                    .header-cate-hover-item {
                        padding: 10px 20px;
                        background: #fff;
                        text-align: center;
                        transition: .3s all;
                        height: 22px;
                        min-width: 100px;
                        line-height: 22px;
                        &:hover {
                            background: #7d3dfe;
                            color: #fff;
                        }
                    }
                    .fb {
                        opacity: 0;
                        transition: .3s all;
                        position: absolute;
                        bottom: -3px;
                        display: block;
                        width: 100%;
                        height: 3px;
                        background-color: #7d3dfe;
                    }
                    .fb:nth-child(1){
                        background-color: #289828;
                    }
                }
            }
        }
        .write-button {
            cursor: pointer;
            border: 1px solid #111111;
            border-radius: 5px;
            border: 1px solid #94979b4d;
            padding: 5px 10px;
            transition: .3s all;
            &:hover {
                border: 1px solid #2f30314d;
            }
        }
    }
}
// 移动端适配
@media screen and (max-width:480px){
    .hide-ms {
        display: none !important;
    }

    .header-cate-list {
        display: flex;
        width: calc(100% - 104px);
        overflow-x: auto !important;
        margin-right: 12px;
        align-items: center;
        // background: #7d3dfe;
        &::-webkit-scrollbar {
            display: none;
        }
        .header-cate-item {
            text-align: center;
            min-width: 42px;
        }
    }
    .write-button {
        text-align: center;
            width: 64px;
            // padding: 3px 5px;
    }
}

</style>